<script setup lang="ts">
import useTabbarInfo from '@/store/tabbar'
import { watchEffect } from 'vue'
const tabbarInfo = useTabbarInfo()
/*
 * @description:
 * @fileName: lx-tabs.vue
 * @params
 * @author: lxx
 * @date: 2023-11-20 10:38:16"
 * @version: V1.0.0
 */
export interface LxTabItemInt {
    title: string
    id: number
    [n: string]: string | number
}
interface LxTabInt {
    list: LxTabItemInt[]
}
const props = withDefaults(defineProps<LxTabInt>(), {
    list: () => {
        return [
            {
                title: '标题一',
                id: 0
            },
            {
                title: '标题二',
                id: 1
            }
        ]
    }
})
const emit = defineEmits(['click'])
// 选中的id
const isActive = ref(0)
watchEffect(() => {
    isActive.value = props.list[0].id
})
const tabClick = (item: LxTabItemInt) => {
    if (isActive.value === item.id) return
    isActive.value = item.id
    emit('click', item)
}
defineExpose({
    isActive
})
// 粘性定位top-头部高度
const tabsTop = ref(0)
watchEffect(() => {
    tabsTop.value = tabbarInfo.headerHeight
})
</script>
<template>
    <view class="tabs_box flex" :style="{ top: tabsTop + 'px' }">
        <view class="tab_item flex" v-for="item in list" :key="item.id" :class="{ tab_active_weight: isActive === item.id }">
            <text @click="tabClick(item)">{{ item.title }}</text>
        </view>
    </view>
</template>
<style lang="scss" scoped>
.tabs_box {
    background: rgba(255, 255, 255, 1);
    padding: 0 26rpx;
    border-bottom: 2rpx solid #f2f2f2;
    border-top: 2rpx solid #f2f2f2;
    position: sticky;
    left: 0;
    z-index: 99;
    background-color: #fff;

    .tab_item {
        font-size: $font-size-28;
        color: rgba(128, 128, 128, 1);
        flex: 1;
        text {
            padding: 20rpx 0;
        }
    }
    // 字体加粗
    .tab_active_weight {
        color: #101010;
        font-weight: bold;
        transition: all 0.3s;
    }
    // 带横线的
    .tab_active {
        color: rgba(255, 141, 26, 1);
        transition: all 0.3s;

        text {
            position: relative;

            &::after {
                content: '';
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
                bottom: 0;
                width: 100%;
                height: 4rpx;
                background-color: rgba(255, 141, 26, 1);
            }
        }
    }
}
</style>
